

import { Redirect } from 'react-router-dom';
import React, { Component } from 'react';


import './company.css';
import companyTxt from './company.json'


const NavigaterItem = (props) => (
  <li>
    <a title={props.title} className={props.title === 'c1' ? "active" : ""} onClick={props.onChangeItem}>{props.name}</a>
  </li >
)
const Navigater = (props) => (
  <div className="cp-head">
    <div className="cp-logo">
    </div>
    <div className="cp-headwrapper">
      <div className="cp-headscroller">
        <ul>
          {
            companyTxt.map((item, i) => (
              <NavigaterItem key={i} onChangeItem={props.onChangeItem} title={item.id} name={item.title} />
            ))
          }
        </ul>
      </div>
    </div>
  </div>
)

const Content = (props) => {
  const txt = props.data;

  return (
    <div className="main_content ">
      <div className="com_intro ComintroWrapper">
        <div className="ComintroScroller">
          <p className="title">{txt.title}</p>
          <p>{txt.a}</p>
          <p>{txt.b}</p>
          <p>{txt.c}</p>
        </div>
      </div>
    </div>

  )
}


import fh from '../../img/fh.png';
import js from '../../img/js.png';

class Company extends Component {

  constructor(props) {
    super(props);

    this.state = { goHome: false, goProject: false, companyInfo: companyTxt[0] };
    this.lastSelect = null;
  }

  onReturn = () => {
    this.setState({ goHome: true });
  }

  onProjectIntro = () => {
    this.setState({ goProject: true });
  }

  onChangeItem = (e) => {
    this.setState({ companyInfo: companyTxt[e.currentTarget.attributes.title.nodeValue[1] - 1] });

    var list = e.currentTarget.parentElement.parentElement.children;
    for (let i = 0; i < list.length; i++) {
      list[i].children[0].className = "";
    }
    e.currentTarget.className = 'active';
  }

  render() {
    const goHome = this.state.goHome;
    const goProject = this.state.goProject;
    const companyInfo = this.state.companyInfo;

    if (goHome) {
      return (<Redirect to="/home" />)
    }

    if (goProject) {
      return (<Redirect to="/projectHome" />)
    }

    return (
      <div className="page">
        <Navigater onChangeItem={this.onChangeItem} />

        <div className="company-right">
        </div>

        <Content data={companyInfo} />

        <img src={fh} alt='' className="company-fh" onClick={this.onReturn} />
        <img src={js} alt='' className="company-js" onClick={this.onProjectIntro} />

      </div>
    )

  }
}

export default Company;
